import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { history } from 'umi'
import { getData } from '@/servers/http'
import { api } from '@/servers/api'
import { resumeTypeMap, workTimeTypeMap } from '@/const'
import { formateMoney } from '@/utils'

type DetailType = {
    type: number
    industryName: string
    cityName: string
    capacityName: string
    minSalary: number
    maxSalary: number
    workAreaName: string
    detailedWorkArea: string
    workTime: number
    otherPreference: string
}

const Position = () => {
    const { id, number } = history.location.query || {}
    const [detail, setDetail] = useState<DetailType>()

    /** 获取意向岗位详情 */
    const getPositionDetail = () => {
        getData(`${api.jobExpectDetail}/${id}`).then(({ status, data }) => {
            if (status === 200) {
                setDetail(data)
            }
        })
    }
    useEffect(() => {
        document.title = '求职意向'
        getPositionDetail()
    }, [])

    return (
        <div className={styles.position_box}>
            {detail && (
                <div className={styles.position_wrap}>
                    <p className={styles.position_title}>意向岗位{number}</p>
                    <div className={styles.position_item}>
                        <label>求职类型</label>
                        <span>{resumeTypeMap.get(detail.type)}</span>
                    </div>
                    <div className={styles.position_item}>
                        <label>期望行业</label>
                        <span>{detail.industryName}</span>
                    </div>
                    <div className={styles.position_item}>
                        <label>期望城市</label>
                        <span>{detail.cityName}</span>
                    </div>
                    <div className={styles.position_item}>
                        <label>岗位意向</label>
                        <span>{detail.capacityName}</span>
                    </div>
                    <div className={styles.position_item}>
                        <label>薪资范围</label>
                        <span>
                            {formateMoney(detail.minSalary)}-{formateMoney(detail.maxSalary)}
                        </span>
                    </div>
                    <div className={styles.position_item}>
                        <label>工作区域</label>
                        <span>
                            {detail.workAreaName}
                            {detail.workAreaName && detail.detailedWorkArea ? '，' : ''}
                            {detail.detailedWorkArea}
                            {detail.workAreaName || detail.detailedWorkArea ? '' : '暂无'}
                        </span>
                    </div>
                    <div className={styles.position_item}>
                        <label>工作班时</label>
                        <span>{workTimeTypeMap.get(detail.workTime) || '暂无'}</span>
                    </div>
                    <div className={styles.position_item}>
                        <label>其他偏好</label>
                        <span>{detail.otherPreference || '暂无'}</span>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Position
